<template>
<!-- 热门音乐详情弹窗 -->
  <div id="topicDetails">
    <div class="div1">
      <div class="mlogoBox">
        <img :src="infoData.thum_pic" />
        <img src="@/assets/wang/video/musicBg.png" />
      </div>
      <!-- <img :src="infoData.thum_pic" class="topicLogo" /> -->
      <div class="right1">
        <div class="text1">
          <div
            class="labelBox"
            v-if="infoData.categoryname != ''"
          >{{ infoData.categoryname }}</div>
          <p>{{ infoData.title }}</p>
          <!-- <el-tooltip
            class="item"
            effect="light"
            content="收藏"
            placement="top"
            popper-class="mytooltip"
            :hide-after="2000"
          >
            <img
              src="@/assets/wang/video/like.png"
              v-show="infoData.isCollect == 0"
              @click="addStar(infoData.music_id, infoData)"
            />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            content="取消收藏"
            placement="top"
            popper-class="mytooltip"
            :hide-after="2000"
          >
            <img
              src="@/assets/wang/video/liked.png"
              v-show="infoData.isCollect == 1"
              @click="cancelStar(infoData.music_id, infoData)"
            />
          </el-tooltip>-->
        </div>
        <div class="text3">
          <p>
            <span class="useCount">{{ format_num(infoData.user_count) }}人使用</span>
          </p>
          <p>
            时长:
            <span>{{ format_time(infoData.duration * 1000) }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="div2">
      <div class="div2Item">
        <div class="myTitle">
          <img src="@/assets/wang/talentCompare/baseinfo.png" alt />
          <span>每日使用人数趋势图</span>
        </div>
        <div class="lineChartBox">
          <lineChart
            :xData="xData1"
            :yData="yData1"
            name1="使用人数"
            v-if="finishChart && xData1.length != 0 && yData1 != null"
          />
          <div
            v-loading="!finishChart"
            v-if="!finishChart"
            class="loading loadingwl01"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            v-if="finishChart && xData1.length == 0 && yData1 == null"
            class="noDataNoticewl"
          >目前没有可以查看的数据哟~</div>
        </div>
      </div>
      <div class="div2Item">
        <div class="myTitle">
          <img src="@/assets/wang/video/useJob.png" alt />
          <span>使用人群行业分布</span>
        </div>
        <div class="pieBox">
          <BigPie :valueData="pieData" v-if="finishPie && pieData.length != 0" />
          <div
            v-loading="!finishPie"
            v-if="!finishPie"
            class="loading loadingwl01"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            v-if="finishPie && pieData.length == 0"
            class="noDataNoticewl"
          >目前没有可以查看的数据哟~</div>
        </div>
      </div>
    </div>
    <div class="div4">
      <el-tabs v-model="sortTabs">
        <el-tab-pane label="点赞排序" name="first"></el-tab-pane>
        <el-tab-pane label="发布时间排序" name="second"></el-tab-pane>
        <section v-show="!noData">
          <div
            class="div4Item"
            v-infinite-scroll="loadMoreVideo"
            infinite-scroll-disabled="busy"
            infinite-scroll-distance="0"
            infinite-scroll-immediate-check="false"
          >
            <div
              class="videoImgBox"
              v-for="(item, index) in topicVideoList"
              :key="'v' + index"
            >
              <img
                src="@/assets/wang/video/like.png"
                class="likeImg"
                v-if="item.isCollect == 0"
                @click="addVideoStar(item.awemeId, item)"
              />
              <img
                src="@/assets/wang/video/liked.png"
                class="likeImg"
                v-if="item.isCollect == 1"
                @click="cancelVideoStar(item.awemeId, item)"
              />
              <img
                src="@/assets/wang/video/play1.png"
                class="playImg"
                @click="toPlay(item.url)"
              />
              <img :src="item.thumPic" class="videoImg" />
              <div class="zanBox">
                <img src="@/assets/wang/video/zan.png" />
                <span>{{ format_num(item.favoriteCount) }}</span>
              </div>
              <div class="userInfoMaskWl"></div>
            </div>
          </div>
          <div
            v-loading="loading"
            v-if="!(topicVideoList.length < (page - 1) * 9)"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <p
            class="nothing"
            v-show="topicVideoList.length < (page - 1) * 9"
          >我是有底线的～</p>
        </section>
        <div class="empty" v-show="!loading && noData">
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import lineChart from '../../component/lineChart.vue';
import BigPie from '@/pages/wang/talent/tdetails/component/BigPie';
export default {
  props: {
    musicId: Number | String
  },
  components: { lineChart, BigPie },
  data() {
    return {
      xData1: [],
      yData1: [],
      yData2: [],
      pieData: [],
      sortTabs: 'first',
      infoData: {},
      topicVideoList: [],
      finishChart: false,
      finishPie: false,
      page: 1,
      busy: false,
      loading: true,
      noData: false,
      cancel: null, //取消之前没响应成功的请求
      cancel03: null, //取消之前没响应成功的请求
      cancel04: null, //取消之前没响应成功的请求
      cancel01: null, //取消之前没响应成功的请求
      cancel02: null //取消之前没响应成功的请求
    };
  },
  computed: {},
  watch: {
    sortTabs: function (newVal, oldVal) {
      this.page = 1;
      this.topicVideoList = [];
      this.getTopicAwemes();
    }
  },
  created() {
    this.getDetailsData();
    this.getTradeRatio();
    this.getTrend();
    this.getTopicAwemes();
  },
  mounted() {},

  methods: {
    // 基本信息
    getDetailsData() {
      let that = this;
      that.$axios
        .get('/api/music/info?musicId=' + that.musicId)
        // .get('/api/topic/GetTopicDetail?topicId=' + '1380949933')
        .then(res => {
          if (res.data.code == 0) {
            that.infoData = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 使用人数
    getTradeRatio() {
      let that = this;
      that.$axios
        .get('/api/music/usernumtrend?musicId=' + that.musicId)
        .then(res => {
          if (res.data.code == 0) {
            let Xdata = res.data.data.dataUnix;
            Xdata.forEach(element => {
              that.xData1.push(that.timestamp(element, 'M/D'));
              return that.xData1;
            });
            that.yData1 = res.data.data.trendData;
            that.finishChart = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 使用人群
    getTrend() {
      let that = this;
      that.$axios
        .get('/api/music/trend?musicId=' + that.musicId)
        .then(res => {
          if (res.data.code == 0) {
            that.pieData = res.data.data;
            that.finishPie = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 视频
    getTopicAwemes() {
      let that = this;
      that.loading = true;
      // that.noData = true
      let SortType = '';
      if (that.sortTabs == 'first') {
        SortType = 1;
      } else if (that.sortTabs == 'second') {
        SortType = 2;
      }
      that.$axios
        .get(
          '/api/music/findAwe',
          {
            params: {
              musicId: that.musicId,
              sort: SortType,
              pageIndex: that.page,
              pageSize: 9
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.loading = false;
            that.page += 1;
            that.topicVideoList = that.topicVideoList.concat(res.data.data);
            res.data.data.length < 9 ? (that.busy = true) : (that.busy = false);
            that.noData = false;
          } else if (res.data.code == 1002) {
            that.loading = false;
            that.noData = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 播放
    toPlay(url) {
      window.open(url);
    },
    loadMoreVideo() {
      if (this.noData == true) {
        return false;
      }
      if (this.loading == false) {
        this.getTopicAwemes();
      }
    },
    // 添加视频收藏
    addVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/InsertCollection',
          {
            CollectId: id,
            Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 1;
            that.$emit('changeVideoCollect', 1, id);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消收藏视频
    cancelVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/CancelCollection',
          {
            CollectId: id,
            Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 0;
            that.$emit('changeVideoCollect', 0, id);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 收藏音乐
    addStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/InsertCollection',
          {
            CollectId: id,
            Module: 3 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 1;
            that.$emit('changeMusicCollect', 1);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消收藏音乐
    cancelStar(id, item) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/CancelCollection',
          {
            CollectId: id,
            Module: 3 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 0;
            that.$emit('changeMusicCollect', 0);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang='less' scoped>
#topicDetails {
  padding: 30px;
  background-color: #ffffff;
  .div1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .mlogoBox {
      width: 91px;
      height: 80px;
      overflow: hidden;
      position: relative;

      img:nth-child(1) {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        border: 1px solid #e5e5e5;
      }

      img:nth-child(2) {
        position: absolute;
        right: 0;
        top: 8px;
        width: 64px;
        height: 64px;
      }
    }
    .topicLogo {
      width: 80px;
      height: 80px;
      border-radius: 20px;
    }
    .right1 {
      flex: 1;
      margin-left: 20px;
      .text1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .labelBox {
          width: 80px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          background-color: #fff4ed;
          border-radius: 13px;
          border: solid 1px #fd7f2c;
          font-size: 14px;
          color: #fd8a3e;
          margin-right: 12px;
        }
        p {
          font-size: 16px;
          color: #222222;
          font-weight: 600;
        }
        img {
          width: 16px;
          height: 16px;
          margin-left: 17px;
          cursor: pointer;
        }
      }
      .text2 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 11px;
        margin-bottom: 6px;
        p {
          font-size: 14px;
          color: #888888;
          padding-right: 8px;
        }
        .infoBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            width: 26px;
            height: 26px;
            border-radius: 50%;
          }
          span {
            font-size: 14px;
            color: #222222;
            padding-left: 6px;
          }
        }
      }
      .text3 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 12px;
        .useCount {
          color: #555555;
          font-weight: 600;
        }
        p {
          font-size: 14px;
          color: #888888;
          padding-right: 29px;
          span {
            color: #222222;
            padding-left: 8px;
          }
        }
      }
    }
  }
  .div2 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 34px;
    .div2Item {
      width: 50%;
    }
  }
  .lineChartBox {
    width: 100%;
    height: 449px;
  }
  .myTitle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img {
      width: 16px;
      height: 16px;
    }
    span {
      font-size: 16px;
      color: #222222;
      padding-left: 9px;
      font-weight: 600;
    }
  }
  .div3 {
    margin-top: 35px;
  }
  .div4 {
    .div4Item {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 28px;
      height: fit-content;
      .videoImgBox {
        width: 110px;
        height: 159px;
        border-radius: 4px;
        position: relative;
        margin-right: 20px;
        margin-bottom: 10px;

        .likeImg {
          width: 20px;
          height: 20px;
          position: absolute;
          left: 7px;
          top: 7px;
          display: none;
          cursor: pointer;
          z-index: 2;
        }

        .playImg {
          width: 30px;
          height: 30px;
          position: absolute;
          left: 40px;
          top: 65px;
          display: none;
          cursor: pointer;
          z-index: 2;
        }

        .videoImg {
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }

        .zanBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          z-index: 2;
          position: absolute;
          left: 0;
          bottom: 4px;

          img {
            width: 13px;
            height: 12px;
            margin-left: 7px;
          }

          span {
            font-size: 14px;
            color: #ffffff;
            padding-left: 6px;
            font-family: DINAlternate-Bold;
          }
        }
      }

      //   hover 显示收藏和播放
      .videoImgBox:hover {
        .likeImg {
          display: block !important;
        }

        .playImg {
          display: block !important;
        }
      }
    }
  }
  .pieBox {
    height: 439px;
  }
}
</style>